<script setup lang="ts">
import { ref } from 'vue';
import AiFlow from './AiFlow.vue';
import RichChatDialog from './RichChatDialog.vue';
import { api } from '@/api/flow-api'

const isPlaying = ref(true);

</script>

<template>
  <header>
  </header>
  <main>
    <AiFlow class="flow-container" :api="api">
      <template #chat-dialog="props">
        <RichChatDialog :visible="props.visible" :id="props.id" :on-close="props.onClose" :api="api" />
      </template>
    </AiFlow>
  </main>
</template>

<style scoped>
:global(body) {
  height: 100vh;
}

header {
  line-height: 1.5;
}

main {
  width: 100%;
  height: 100%;
}

.flow-container {
  width: 100%;
  height: 100%;
}
</style>
